<template>
	<scroll-view :scroll-x="true" class="tabsbg">
		<block v-if="type==0">
			<view @click="settitindex(0)" :class="titindex==0?'tabsitem active':'tabsitem'">夏氏渊源</view>
			<view @click="settitindex(1)" :class="titindex==1?'tabsitem active':'tabsitem'">字辈堂号</view>
			<view @click="settitindex(2)" :class="titindex==2?'tabsitem active':'tabsitem'">寻根问祖</view>
		</block>
		<block v-if="type==4">
			<view @click="settitindex(0)" :class="titindex==0?'tabsitem active':'tabsitem'">企业</view>
			<view @click="settitindex(1)" :class="titindex==1?'tabsitem active':'tabsitem'">成就</view>
			<view @click="settitindex(2)" :class="titindex==2?'tabsitem active':'tabsitem'">作品</view>
		</block>
	</scroll-view>
	<homeList :list='list' :status="status" orgin='list'></homeList>
	<view class="" style="height: 30rpx;"></view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		articleArticleList
	} from "@/api/index.js"
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		useSystemStore
	} from '@/stores/system.js'
		const systemInfo = useSystemStore()
	
	onReachBottom(() => {
		page.value++
		getList()
	})
	let type=ref(0)
	// 类型(0：文化，1：新闻，2：公告，3：企业，4：成就，5：作品，6：常见问题)；
	onLoad((e) => {	
		type.value=e.type
		let txt=type.value==0?'氏文化':type.value==1?'氏新闻':type.value==2?'氏公告':'氏成就'
		uni.setNavigationBarTitle({
			title:systemInfo.configName+txt
		})
		getList()	
	})
	let titindex=ref(0)
	function settitindex(e){
		titindex.value=e
		page.value=1
		getList()
	}
	
	
	let status=ref('loadmore')
	
	let list = ref([])
	
	let page=ref(1)
	function getList() {
		
		let data = {
			pageSize: 10,
			pageNum: page.value,
			type:type.value
		}
		if(type.value==0){
			 data.subType=titindex.value
		}else if(type.value==4){
			 if(titindex.value==0){
				  data.type=3
			 }else if(titindex.value==1){
				 data.type=4
			 }else{
				 data.type=5
			 }
			
		}
		status.value='loading'
		
		articleArticleList(data).then(res => {
			if (page.value == 1) {
				list.value = res.rows
				status.value='nomore'
			} else {
				
				if (res.rows.length == 0) {
					uni.showToast({
						title: "暂无更多数据~",
						icon: "none"
					})
					page.value--
					status.value='nomore'
					return
				} else {
					list.value = [...list.value, ...res.rows]
                    status.value='nomore'
				}


			}
		})

	}

</script>


<style scoped lang="scss">
	.tabsbg {
		width: 750rpx;
		white-space: nowrap;
		margin-bottom: 40rpx;
	
		.tabsitem {
			margin-left: 30rpx;
			width: 166rpx;
			height: 80rpx;
			display: inline-flex;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			color: #C0C0C0;
			border: 1rpx solid #FFFFFF;
		}
	
		.active {
			border: 1rpx solid #111111;
			color: #111111;
		}
	}
</style>